<template>
  <el-dialog :title="formData.title" :visible.sync="dialogFormVisible"  @close='closeDialog'>
    <el-form :model="form" >
      <el-form-item label="组织名称" :label-width="formLabelWidth">
        <el-autocomplete
                size="mini"
                v-model="form.pName"
                :fetch-suggestions="searchOrg"
                placeholder="请输入组织名称（必填）"
                @select="handleSelectOrg"
                :trigger-on-focus="false"
                value-key="name"
        ></el-autocomplete>
        </el-form-item>
        <el-form-item label="岗位属性" :label-width="formLabelWidth">
        <el-autocomplete
                size="mini"
                v-model="form.property"
                :fetch-suggestions="searchProperty"
                placeholder="请选择岗位属性（必填）"
                @select="handleSelectProperty"
                :trigger-on-focus="false"
                value-key="name"
        ></el-autocomplete>
        </el-form-item>
        <el-form-item  style="overflow:hidden">
              <el-form-item style="width:50%;float:left" label="人员姓名" :label-width="formLabelWidth">
                <el-input size="mini" v-model="form.name" auto-complete="off" placeholder="请输入人员名称（必填）"></el-input>
              </el-form-item>
              <el-form-item style="width:50%;float:left" label="联系方式" :label-width="formLabelWidth">
                <el-input size="mini" v-model="form.tel" auto-complete="off" placeholder="请输入人员手机号（必填）"></el-input>
              </el-form-item>
          </el-form-item>
        <el-form-item  label="身份证号" :label-width="formLabelWidth"> 
              <el-input size="mini" placeholder="请输入身份证号（选填）" type="text" v-model="form.idCard"></el-input>
        </el-form-item>
        <el-form-item style="width:50%"  label="密码" :label-width="formLabelWidth"> 
              <el-input :disabled="formData.title == '编辑成员'" style="float:left" size="mini" placeholder="请输入密码" type="password" v-model="form.pwd">
              </el-input>
              <el-button 
                size="mini" 
                type="warning" 
                @click="pwdReset" 
                v-if="formData.title == '编辑成员'"
                style="position:absolute;right:-62px;top:5px;">重置</el-button>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button style="padding:9px 15px" @click="dialogFormVisible = false">取 消</el-button>
      <el-button style="padding:9px 15px" type="primary" @click="sureBtn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {findOrgList,findStationList,addPerson,resetPassword,changePersonInfo} from '../../tool/config'
import { Notification } from 'element-ui'

export default {
  name: 'addEditpersonDialog',
  props:{
    ShowAddEditpersonDialog:{},
    formData:Object
  },
  data: function() {	
    return {
      dialogFormVisible: false,
      form: {
          name: '',
          pName:'',
          idCard:'',
          tel:'',
          pwd:'',
          property:'',
          orgId:'',
          stationId:'',
          userId:''
      },
      formLabelWidth: '120px',
      orgNameString:[],
      properNameString:[]
    }
  },
  methods: {
    closeDialog(){
        this.$emit('closeAddEditDialog',this.dialogFormVisible)
    },
    searchOrg(string,cb){
      //返回可选列表
      cb(this.orgNameString);
    },
    handleSelectOrg(item){
     this.form.orgId = item.id;
    },
    searchProperty(string,cb){
      cb(this.properNameString);
    },
    handleSelectProperty(item){
      this.form.stationId = item.id;
    },
    pwdReset(){
      resetPassword({userId:this.form.userId}).then(res=>{
        if(res.code == 0){
          this.form.pwd = 'user123'
            this.$notify({
            title: '提示',
            message: '密码重置成功',
            duration: 3000,
            type: 'success'
          })
        }else{
          this.$notify({
            title: '提示',
            message: res.msg,
            duration: 3000,
            type: 'warning'
          })
        }
      })
    },
    sureBtn(){
      //添加成员时
        if(!this.form.orgId || !this.form.stationId){
          this.$notify({
            title: '提示',
            message: '请选择组织或岗位',
            duration: 3000,
            type: 'warning'
          })
          return
          }
        if(!this.form.name){
          this.$notify({
            title: '提示',
            message: '名字不能为空',
            duration: 3000,
            type: 'warning'
          })
          return
        }
        if(!this.form.tel){
          this.$notify({
            title: '提示',
            message: '联系电话不能为空',
            duration: 3000,
            type: 'warning'
          })
          return
        }
        // if(!this.form.pwd){
        //   this.$notify({
        //       title: '提示',
        //       message: '密码不能为空',
        //       duration: 3000,
        //       type: 'warning'
        //   })
        //   return
        // }
      if(this.formData.title == '添加成员'){
        //发送请求
        var obj = {
          idCard:this.form.idCard,
          name:this.form.name,
          orgId:this.form.orgId,
          password:this.form.pwd,
          stationId:this.form.stationId,
          tel:this.form.tel
        }
        addPerson(obj).then(res=>{
          console.log(res)
          if(res.code == 0){
            this.dialogFormVisible = false;
            //数据更新
            this.$emit('reloadData',true);
            this.$notify({
              title: '提示',
              message: '添加成功',
              duration: 3000,
              type: 'success'
            })
          }else{
            this.$notify({
              title: '提示',
              message: res.msg,
              duration: 3000,
              type: 'warning'
            })
          }
        })
      }
      //编辑成员时
      if(this.formData.title == '编辑成员'){
        var obj = {
          id:this.form.id,
          name:this.form.name,
          orgId:this.form.orgId,
          password:this.form.pwd,
          tel:this.form.tel,
          userId:this.form.userId
        };
        changePersonInfo(obj).then(res=>{
          if(res.code == 0){
            this.dialogFormVisible = false;
            this.$emit('reloadData',true);
            this.$notify({
              title: '提示',
              message: '修改成功',
              duration: 3000,
              type: 'success'
            })
          }else{
            this.$notify({
              title: '提示',
              message: res.msg,
              duration: 3000,
              type: 'warning'
            })
          }
        })
      }
    }
    
  },
  watch:{
    ShowAddEditpersonDialog(val,oldVal){
      this.dialogFormVisible = val;
      //当前选项的编辑传过来数据
      if(this.formData.data.id){
        this.form.name = this.formData.data.userName || '';
        this.form.pName = this.formData.data.orgName || '';
        this.form.tel = this.formData.data.tel || '';
        this.form.property = this.formData.data.stationName || '';
        this.form.pwd = this.formData.data.password || '';
        this.form.idCard = this.formData.data.idCard || '';
        this.form.userId = this.formData.data.userId || '';
        this.form.orgId = this.formData.data.orgId || '';
        this.form.id = this.formData.data.id || '';
        this.form.stationId = this.formData.data.stationId || '';
      }else{
      //添加成员不需要回显
        this.form.name = '';
        this.form.pName = '';
        this.form.tel = '';
        this.form.property = '';
        this.form.idCard = '';
        this.form.pwd = '';
        this.form.orgId = '';
        this.form.stationId = '';
      }
    },
    'form.pName':function(val,oldVal){//搜索组织
      if(val != oldVal){
        findOrgList({name:val}).then((res)=>{
          if(res.code == 0){
            this.orgNameString = res.response; 
          }else{
            this.orgNameString = [];
          }
        })
      }
    },
    'form.property':function(val,oldVal){//搜索组织
      if(val != oldVal){
        findStationList({name:val}).then((res)=>{
          if(res.code == 0){
            this.properNameString = res.response; 
          }else{
            this.properNameString = [];
          }
        })
      }
    },
  },
  computed:{
   
  }
}
</script>

<style scoped>

</style>